<template>
  <el-card class="box-card" style="margin-bottom:10px">
    <el-form :inline="true" :disabled="isDisabled" :model="formInline" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select v-model="category1Id" placeholder="请选择">
          <el-option v-for="c1 in categoryListStore.category1List" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="category2Id" placeholder="请选择">
          <el-option v-for="c2 in categoryListStore.category2List" :key="c2.id" :label="c2.name" :value="c2.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="category3Id" placeholder="请选择">
          <el-option v-for="c3 in categoryListStore.category3List" :key="c3.id" :label="c3.name" :value="c3.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'CategorySelector'
});
</script>
<script setup lang="ts">
import { reactive, onMounted, computed } from 'vue';
import { reqGetCategory1List } from '@/api/product/categorySelector';
import { useCategoryListStore } from '@/stores/categorySelector';
defineProps(['isDisabled'])
const categoryListStore = useCategoryListStore();
const formInline = reactive({
  user: '',
  region: ''
});

// 1. 当页面组件挂载完毕的时候 要获取一级导航分类数据
onMounted(() => {
  categoryListStore.getCategory1List();
});

// 2. 使用计算属性缓存一级分类id 同时还可以发送请求获取二级分类数据
/**
 * 1. 下拉框select中v-model的值是与option中的value值对应的
 * 2. v-model中的值是可以使用双向数据绑定的 而且可以使用完整写法 就是带get与set的
 * 3. 当一级导航分类切换的时候 会将当前分类的id赋值给v-model 也就是会走set函数
 * 4. 同时当一级导航分类切换的时候 立即根据一级导航分类id获取二级导航数据 也在set中完成
 * 5. 以上3  4 中需要在set函数中调用store中的getCategory2List方法 将category1Id传递过去
 * 6. 在store的getCategory2List方法中，实现获取二级导航数据及给category1Id赋值
 */
const category1Id = computed({
  get() {
    return categoryListStore.category1Id as number;
  },
  set(val:number) {
    // 直接调用获取二级分类数据的方法 并传参
    categoryListStore.getCategory2List(val);
  }
});

const category2Id = computed({
  get() {
    return categoryListStore.category2Id as number
  },
  set(val:number) {
    categoryListStore.getCategory3List(val);
  }
})

const category3Id = computed({
  get() {
    return categoryListStore.category3Id as number
  },
  set(val:number) {
    categoryListStore.setCategory3Id(val)
  }
})
const onSubmit = () => {
  console.log('submit!');
};
</script>

<style scoped lang="scss">
.box-card {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>